<template>
  <div>
      <!-- 设置表头的背景色，字体颜色，行高  -->
    <el-table class= "headerStyle"
        :row-class-name="tableRowClassName"
        :cell-style="{'text-align':'center'}"
        :header-row-style="{background:'#ffb0e7',color:'#031625',height:'40px'}"
        :header-row-class-name= "el-table-header"
        :data="items" @row-click="handleEdit" border style="width: 100%">
       <el-table-column prop="id" v-if="false">
      </el-table-column>
      <el-table-column prop="userId" label="用 户 ID" width="180" align='center'>
      </el-table-column>
      <el-table-column prop="loginTime" label="登 录 时 间" width="300" align='center'>
      </el-table-column>
      <el-table-column prop="browser" label="浏 览 器" width="300" align='center'>
      </el-table-column>
      <el-table-column prop="ip" label="IP 地 址" align='center'>
      </el-table-column>
      <el-table-column label="操 作" width="200" align='center'>
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    <!-- <br> -->
    <el-col :span="24" class="toobar">
      <el-pagination @current-change='handleCurrentChange' background
        layout="prev, pager, next" :total="total" :current-page="currentPage">
      </el-pagination>
    </el-col>
  </div>
</template>

<script>
import axios from 'axios'
export default {

  data () {
    return {
      getData: '',
      items: [],
      total: 0,
      currentPage: 1,
      pageSize: 10
    }
  },
  methods: {
    handleDelete: function (var1) {
      // alert('需要删除数据传入的参数是' + this.items[var1].id)
      axios
        .get('http://127.0.0.1:9000/delLog', {
          params: {
            id: this.items[var1].id
          }
        })
      location.reload()
      // eslint-disable-next-line no-undef
      // alert('删除数据传入的参数是' + var1 + ',' + this.items.get(var1))
    },
    handleCurrentChange: function (var2) {
      this.currentPage = var2
      axios
        .get('http://127.0.0.1:9000/loginLog', {
          params: {
            current: this.currentPage, // 页码
            size: this.pageSize
          }
        })
        .then(response => {
          this.items = response.data.data.records
          this.total = response.data.data.total
        })
        .catch(function (error) {
          this.$message({ message: '获取失败' + error, type: 'error' })
        })
    },
    tableRowClassName: function ({row, rowIndex}) {
      if ((rowIndex + 1) % 2 === 0) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    }

  },
  // 挂载完成之后执行
  mounted () {
    axios
      .get('http://127.0.0.1:9000/loginLog', {
        params: {
          current: this.currentPage, // 页码
          size: this.pageSize
        }
      })
      .then(response => {
        this.items = response.data.data.records
        this.total = response.data.data.total
      })
      .catch(function (error) {
        this.$message({ message: '获取失败' + error, type: 'error' })
      })
  }

}
</script>

<style scoped>
   .el-table .warning-row {
    background: #ffb0e7;
  }

  .el-table .success-row {
    background: #8ef0fd;
  }

  .el-main{
    color: deepskyblue;
    text-align:center;
    line-height: 40px;
  }

  .headerStyle {
    background:#ffffff;
    color: #031625;
    height:620px;
    padding:0px
                }
</style>
